<template>
  <div class="container">
      <div class="post-title">

          <h4>标题:</h4>
          <input type="text" maxlength="16" v-model="post_title">
      </div>

      <div class="post-summary">
          <h4>简介:</h4>
          <textarea name="" cols="30" rows="10" maxlength="200" v-model="summary"></textarea>
      </div>

      <div class="post-images">

          <div class="btn-group">
              <input type="file" class="add-img-btn" ref="img_upload" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" @change="addImage"/>
              <button class="del-img-btn" @click="delImage"></button>
              <button class="post-btn" @click="postImages"></button>
          </div>

          <div class="images">
              <div class="img-box" v-for="(item,i) in added_images " :key="i">
                  <img :src=item alt="">
              </div>
          </div>
      </div>

      <div class="warning">
         <h2>{{warning}}</h2>
      </div>

  </div>
</template>

<script>
import { constants } from 'crypto';
export default{
    data(){
        return{
            post_title:'',
            count:0,
            summary:'',
            added_images:[],
            warning:''
        }
    },
    mounted:function(){
        this.$store.commit('setTitle','post');
        this.$store.commit('switchIsOriginPath',true);            
    },
    methods:{
        addImage(){
            if(this.added_images.length==4){
                this.warning="图片已达上限"
            }else{
                let reads = new FileReader();
                var f = this.$refs.img_upload.files[0];
                reads.readAsDataURL(f);
                reads.onloadend=(e) =>{
                    this.added_images.push(e.target.result);
                } 
            }
        },

        delImage(){
            if(this.added_images.length!=0){
                this.added_images.pop();
            }else{
                this.warning="请上传图片"
            }
        },
        postImages(){
            if(this.post_title==''){
                this.warning="请输入标题";
            }else if(this.summary==''){
                this.warning="请输入简介";
            }else if(this.added_images.length==0){
                this.warning="未上传图片";
            }else{
                var time=this.getNowFormatDate();
                var data={
                    user_name: this.$store.state.login_data.user_name,
                    post_title: this.post_title,
                    summary: this.summary,
                    images: this.added_images,
                    add_time: time,
                };
                this.uploadImage(data);
            }
        },

        uploadImage(data){
            this.$http.post(this.$store.state.server_home_url+'/addpost',data)
            .then((res)=>{
                if(res.body.status==0){
                    console.log("发布成功");
                    this.$router.push({path:'/home'});
                }else{
                    this.warning='该标题已被使用';
                }
            })
        },

        getNowFormatDate() {
            var date = new Date();
            var seperator1 = "-";
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            var hour=date.getHours();
            var minute=date.getMinutes();
            var second=date.getSeconds();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (day >= 0 && day <= 9) {
                day = "0" + day;
            }
            if (hour >= 0 && hour <= 9) {
                hour = "0" + hour;
            }            
            if (minute >= 0 && minute <= 9) {
                minute = "0" + minute;
            }
            if (second >= 0 && second <= 9) {
                second = "0" + second;
            }
            var current_time = year + seperator1 + month + seperator1 + day+' '+hour+':'+minute+':'+second;
            return current_time;
        }
    }
}
</script>


<style lang="scss" scoped>
    .container{
         margin-top:28%;

        .post-title{
           
            display: flex;
            margin-left:12%;
            h4{
                margin:0 0 0 0;
            }
            input{
                width:60%;
                height:20px;
                margin:0 0 0 3%;
                background: #ddd;
            }
        }

        .post-summary{
            display: flex;
            margin-left:12%;
            margin-top:8%;
            h4{
                margin:0 0 0 0;
            }            
            textarea{
                width:60%;
                background: #ddd;
                margin:0 0 0 3%;
                border: 0;
            }
        }

        .post-images{
            margin-top:10%;
            margin-left:12%;
            display: flex;
            .btn-group{
                display: flex;
                flex-direction: column;
                .add-img-btn{
                    text-indent:-9999px;
                    overflow:hidden;
                    width: 40px;
                    height: 40px;
                    background: url('../../images/icons/add-photo-btn.png');
                    background-size:40px 40px;  
                }
                .del-img-btn{
                    margin-top:15px;
                    width: 40px;
                    height: 40px;
                    background: url('../../images/icons/del-photo-btn.png');
                    background-size:40px 40px;  
                }
                .post-btn{
                    border:0;
                    margin-top:50px;
                    width: 40px;
                    height: 40px;
                    background: url('../../images/icons/post-btn-grey.png');
                    background-size:40px 40px;                    
                } 
            }

            .images{
                width:202px;
                margin-top:-15px;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;

                
                .img-box{
                    border:1px solid black;
                    border-radius: 10px 10px;
                    margin-top:15px;
                    margin-left:15px;
                    width:84px;
                    height:84px;
                    overflow: hidden;
                    img{                        
                        width: 150px;
                    }
                }
            }
         
        }

        .warning{
            margin-top:5%;
            text-align: center; 
            color: red;
        }

        
    }
</style>